<div class="cal-context" style="width: 100%;">

  <div class="alert alert-danger" ng-if="!view">The value passed to calendar-view is not set</div>

  <mwl-calendar-year
    calendar-events="events"
    calendar-current-day="currentDay"
    calendar-event-click="eventClick"
    calendar-edit-event-click="eventEditClick"
    calendar-delete-event-click="eventDeleteClick"
    calendar-edit-event-html="editEventHtml"
    calendar-delete-event-html="deleteEventHtml"
    calendar-auto-open="autoOpen"
    calendar-timespan-click="timespanClick"
    ng-if="view == 'year'"
  ></mwl-calendar-year>

  <mwl-calendar-month
    calendar-events="events"
    calendar-current-day="currentDay"
    calendar-event-click="eventClick"
    calendar-edit-event-click="eventEditClick"
    calendar-delete-event-click="eventDeleteClick"
    calendar-edit-event-html="editEventHtml"
    calendar-delete-event-html="deleteEventHtml"
    calendar-auto-open="autoOpen"
    calendar-use-iso-week="useIsoWeek"
    calendar-timespan-click="timespanClick"
    ng-if="view == 'month'"
    ></mwl-calendar-month>

  <mwl-calendar-week
    calendar-events="events"
    calendar-current-day="currentDay"
    calendar-event-click="eventClick"
    calendar-use-iso-week="useIsoWeek"
    calendar-week-title-label="{{ weekTitleLabel }}"
    ng-if="view == 'week'"
    ></mwl-calendar-week>

  <mwl-calendar-day
    calendar-events="events"
    calendar-current-day="currentDay"
    calendar-event-click="eventClick"
    calendar-event-label="{{ eventLabel }}"
    calendar-time-label="{{ timeLabel }}"
    calendar-day-view-start="{{ dayViewStart }}"
    calendar-day-view-end="{{ dayViewEnd }}"
    ng-if="view == 'day'"
    ></mwl-calendar-day>
</div>
